<template>
  <div>
    <div class="block">
      <span class="demonstration">周：</span>
      <el-date-picker
        :title="titleWeek"
        @change="acquisitionWeek"
        @close="close"
        v-bind="$attrs"
        v-on="$listeners"
        v-model="value3"
        type="week"
        format="yyyy 第 WW 周"
        :picker-options="{'firstDayOfWeek': 1}"
        placeholder="选择周">
      </el-date-picker>
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'DomeHelloWorld',

  data() {
    return {
      value3: '',
      titleWeek:null
    };
  },

  mounted() {
    
  },

  methods: {
    acquisitionWeek(){
      if(!this.value3) return
      let temptTime = this.value3
      let weekDate= temptTime.getDate()
      let weekFirstDate = weekDate - 1
      let weekEndDate = weekDate + 5
      let year = temptTime.getFullYear()
      let month = temptTime.getMonth() +1
      let lastMonth = null
      let firstMonth = null
      let lastYear = null
      let firstYear = null
    
      if(weekFirstDate == 0){
        firstMonth = month - 1
        if(firstMonth == 0){
          firstMonth = 12
          firstYear = year - 1
        }else if(firstMonth === 1 || firstMonth ===3 || firstMonth ===5 || firstMonth ===7 || firstMonth ===8 || firstMonth ===10 || firstMonth ===12){
          weekFirstDate = 31
          firstMonth = month + 1
        }else if(firstMonth === 2){
          if(year % 100 != 0 && year % 4 == 0 || year % 400 == 0){
            weekFirstDate = 29  
            firstMonth = month + 1
          }else{
            weekFirstDate = 28 
            firstMonth = month + 1
          }
        }else{
          weekFirstDate = 30
          firstMonth = month + 1
        }
      }else{
        firstYear = year
        firstMonth = month
      }

     if(month === 1 || month ===3 || month ===5 || month ===7 || month ===8 || month ===10 || month ===12){
      if(weekEndDate>31){
        weekEndDate-=31
        lastMonth = month+1
        if(lastMonth>12){
          lastMonth = 1
          lastYear = year + 1
        }else{
          lastYear = year
        }
      }else{
        lastYear = year
        lastMonth = month
      }
    }else if(month === 2){
        if(year % 100 != 0 && year % 4 == 0 || year % 400 == 0){
          if(weekEndDate>29){
          weekEndDate-=29
          lastMonth = month + 1
          }else{
            
            lastMonth = month
          }
        }else{
          if(weekEndDate>28){
            lastMonth = month + 1
            weekEndDate -= 28 
          }else{
            lastMonth = month
          }
        }
        lastYear = year
    }else{
      if(weekEndDate>30){
        lastMonth = month + 1
        weekEndDate -= 30
      }else{
        lastMonth = month
      }
      lastYear = year
    }
     this.titleWeek = `${firstYear}年${firstMonth}月${weekFirstDate}日至${lastYear}年${lastMonth}月${weekEndDate}日`
      
      //主组件的数据
      //周几
        let weekday = temptTime.getDay() || 7
        //周1+5天=周六
        temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
        let firstDay = new Date(temptTime.getFullYear(), 0, 1)
        let dayOfWeek = firstDay.getDay()
        let spendDay = 1
        let currentYear = temptTime.getFullYear()
        if (dayOfWeek != 0) {
          spendDay = 7 - dayOfWeek + 1
        }
        firstDay = new Date(currentYear, 0, 1 + spendDay)
        let d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
        let result = Math.ceil(d / 7)
        this.$emit("getWeek",`当前为${currentYear}年  第 ${result+1}周`)
    },
    clearWeek(){
      this.value3 = ""
    },
    close(){
      this.titleWeek = null
    }
  },
};
</script>

<style lang="scss" scoped>

</style>